<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部nav -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <div>
      <!-- teb切换 -->
      <div class="in_con_teb" id="searchBar" :class="{'isFixed':this.searchBarFixed}">
        <div class="in_con_ele bdr dip">
          <!-- <a :href="INconTEB.tebURl" class="in_con_text dip" v-for="(INconTEB,index) in InConTeb " :key="index" :class="{'acrtive':INconTEB.ind}">{{INconTEB.tebText}}</a>   -->
          <span class="in_con_text dip" v-for="(INconTEB,index) in InConTeb " :key="index" :class="{'acrtive':INconTEB.ind}" @click="getscrtoll(INconTEB.tebURl,index)">{{INconTEB.tebText}}</span>  
        </div> 
      </div>
      <!-- 商品info -->
      <!-- <div class="deta_service dipW" :class="{'deta_service_active':this.deta_service,'deta_service_active2':this.deta_service2}" id="detaserviceinfo">
        <img :src="'../../../static/images/product/'+detaService.ImgScr+''" alt="" class="deta_service_img">
        <section class="deta_service_text">
          <p class="deta_service_header deta_service_buc wid_pad_lf">{{detaService.text}}</p>
          <section class="deta_service_box">
            <h2 class="wid_pad_lf deta_service_title">{{detaService.title}}</h2>
            <hgroup class="wid_pad_lf deta_service_present">{{detaService.present}}</hgroup>
            <p class="wid_pad_lf deta_service_number">
              <span class="number_money">￥{{detaService.number}}</span>
              <span v-if="detaService.Topay">{{detaService.Topay}}</span>
            </p>          
          </section>
          <p class="deta_service_buc deta_service_number wid_pad_lf dip benefit">
            <span class="deta_service_benefit">{{detaService.benefit}}</span>
            <span class="deta_service_Explain">{{detaService.Explain}}</span>
          </p>
        </section>
      </div> -->
      <div class="deta_service dipW" :class="{'deta_service_active':this.deta_service,'deta_service_active2':this.deta_service2}" id="detaserviceinfo">
        <img :src="'./static/images/product/details_bnner1.jpg'" alt="" class="deta_service_img">
        <!-- <img :src="'./static/images/product/details_bnner'+this.iDNumber+'.jpg'" alt="" class="deta_service_img"> -->
        <section class="deta_service_text">
          <p class="deta_service_header deta_service_buc wid_pad_lf">{{detaService.text}}</p>
          <section class="deta_service_box">
            <h2 class="wid_pad_lf deta_service_title">{{detailS.commodityName}}</h2>
            <hgroup class="wid_pad_lf deta_service_present">{{detailS.description}}</hgroup>
            <p class="wid_pad_lf deta_service_number">
              <span class="number_money">￥{{detailS.marketPrice}}</span>
              <span v-if="detaService.Topay">{{detaService.Topay}}</span>
            </p>          
          </section>
          <p class="deta_service_buc deta_service_number wid_pad_lf dip benefit">
            <span class="deta_service_benefit">{{detaService.benefit}}</span>
            <span class="deta_service_Explain">{{detaService.Explain}}</span>
          </p>
        </section>
      </div>
      <!-- 服务service -->
      <div class="deta_service_service dipW " v-for="(item,index) in serviceIMg" :key="index" :id="item.Id" :class="{'quteb':item.class}" >
        <p class="deta_service_service_text dip">
          <span class="deta_service_bg bg_service_scr1"></span>
          <i>{{item.title}}</i>
          <span class="deta_service_bg bg_service_scr2"></span>
        </p>
        <img v-for="(listImg,indexs) in item.img" :key="indexs"  :src="'../../../static/images/product/'+listImg.service_IMg+''" alt="" class="deta_service_service_IMG">  
      </div>
    </div>
    <footer class="payment_mode dip bdr">
      <div class="mall_ToPay Asyougo_bg" @click="Clkwechet()">立即预定</div>        
    </footer>
  </div>
</template>
<script>
import Nav from './mallTopNav'
import $$ from 'jquery'
var throttle = require('lodash/throttle');
export default {
  data(){
    return {
      InConTeb:[ //teb切换
        {
          tebText:'商品',
          tebURl:'#detaserviceinfo',
          ind:true, 
        },{
          tebText:'服务',
          tebURl:'#detaservice1',
          ind:false, 
        },{
          tebText:'详请',
          tebURl:'#detaservice2',
          ind:false, 
        },{
          tebText:'参数',
          tebURl:'#detaservice3',
          ind:false, 
        }
      ],
      searchBarFixed:false, //浏览器的判断事件
      deta_service:false,
      deta_service2:false,
      throttleScroll: null,
      detaService:{
        text:'商品信息',
        Topay:'可支持货到付款',
        benefit:'惠',
        Explain:'2018年期间购买广告机免费赠送一年的海报设计'
      },
      serviceIMg:[
        {
          title:'服务',
          Id:'detaservice1',
          img:[
            {
               service_IMg:'service.jpg'
            }
            ,{
               service_IMg:'service.jpg'
            }
            ,{
               service_IMg:'service.jpg'
            }
          ]
        },
        {
          title:'详情',
          Id:'detaservice2',
          img:[
            {
               service_IMg:'service.jpg'
            }
          ]
        },
        {
          title:'参数',
          Id:'detaservice3',
          class:true,
          img:[
            {
               service_IMg:'service.jpg'
            }
            ,{
               service_IMg:'service.jpg'
            }
          ]
        }
      ],
      urls:{
        url:'/bomNav/mall',
        text:'',
      },
      iDNumber:'',//接收上级的路由参数,
      detailS:null,
    }
  },
  methods:{
    // reds:function(index,item){
    //     let _this = this ;
    //     // _this.$router.push({path:''+this.iDNumber+''+''+item+''})     
    //     _this.ind = index;
    // },
    Clkwechet(){
      //获取touck
        var  _this = this
        _this.touck =sessionStorage.getItem('token')
        var str = Base64.decode(_this.touck)   //转义
        var objad = String(str).split("{")
        var objadf = String(objad).split("}")
        var objaS = String(objadf).split(',')
      //数组裁切
        var obja = new Object();      
        for (var x in objaS){
          if(objaS[x] != ''){
            var split = objaS[x].split(':');
            if(/^\"|\"$/.test(split[0]) == true){
              var d = split[0].substring(1,split[0].length-1)
            }
            if(/^\"|\"$/.test(split[1]) == true){
              var f = split[1].substring(1,split[1].length-1)
            }
            obja[d] = f;
          }
        }
      //获取name
        let shou = obja.name
        if(shou != null && shou != undefined && shou != ''){
          this.$router.push({
            path:'/bomNav/'+this.iDNumber+'/Order', //把传的路由给字元素
            // params:{
            //   luyouL:this.iDNumber // 把id 在传子元素
            // }
          })
        }else{
          alert('亲，请登录手机号')
          this.$router.push({path:'/bomNav/Verification'})
        }
    },
    getscrtoll(d,ind){
      let NACHD = document.querySelector(d).offsetTop; //ifon的高度
      if(d == '#detaservice1'){
        let hh = document.querySelector('#detaserviceinfo'); //ifon的高度
        hh.style.paddingTop = '1.9rem' ;
      }
      $$('body,html').animate({
          scrollTop:NACHD -180
      }, 600); 
      this.isFOr(ind) 
    },
    handleScroll() {
      let h = document.querySelector('#searchBar').offsetHeight; // 获取teb的高度
      let wh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let navH = document.querySelector('#detaserviceinfo').offsetHeight - 190; //ifon的高度
      let navH1 = document.querySelector('#detaservice1').offsetHeight; //服务的高度
      let navH2 = document.querySelector('#detaservice2').offsetHeight; //详情的高度
      let navH3 = document.querySelector('#detaservice3').offsetHeight; //参数的高度
      // console.log(wh,navH,navH1,navH2,navH3)
      if(wh <= 0 ){
        this.isFOr(0)
        this.searchBarFixed = false 
        let hh = document.querySelector('#detaserviceinfo'); //ifon的高度
        hh.style.paddingTop = '0rem' ;
      }else if(wh > 1 && wh <= navH ){
        this.searchBarFixed = true
        this.isFOr(0)           
      }else if(wh > navH && wh <= (navH + navH1) ){
        this.searchBarFixed = true        
        this.isFOr(1)   
      }else if(wh > (navH + navH1) && wh <= (navH + navH1 + navH2)){
        this.searchBarFixed = true        
        this.isFOr(2)               
      }else if(wh > (navH + navH1 + navH2)){
        this.searchBarFixed = true        
        this.isFOr(3)  
      }     
    },
    isFOr(index){
      // console.log(this.InConTeb.ind)
      for(var i = 0;i<this.InConTeb.length;i++){
        this.InConTeb[i].ind = false
      }
       this.InConTeb[index].ind = true
    },
  }
  ,components:{Nav} //引入组件
  // ,beforeCreate(){
  //   this.iDNumber = this.$route.params.id; //获取到父元素的Id  
  //   if(this.iDNumber ==1){
  //     this.detailS = JSON.parse(sessionStorage.getItem('details1'))
  //   }else if(this.iDNumber ==2){
  //     this.detailS = JSON.parse(sessionStorage.getItem('details2'))
  //   }
  //   console.log(this.detailS)
  // }
  ,created(){
    this.iDNumber = this.$route.params.id; //获取到父元素的Id  
    if(this.iDNumber ==1){
      this.detailS = JSON.parse(sessionStorage.getItem('details1'))
    }else if(this.iDNumber ==2){
      this.detailS = JSON.parse(sessionStorage.getItem('details2'))
    }
    // console.log(this.detailS)
    this.urls.text = this.detailS.commodityName
  },
  mounted() {
    //写在掉接口的里面的
    this.$nextTick(() => {
      //这里使用监听的scroll的事件，为什么要使用的节流函数，如果不使用的，页面一直在滚动计算的，这样在
      //使用手机时候，出现非常卡的，隔一段时间计算，大大降低了性能的消耗（具体的好处自己去查资料）
      window.addEventListener('scroll', this.throttleScroll, false);
    });

    this.throttleScroll = throttle(this.handleScroll,0);
  },
  destroyed() { //离开清楚
    window.removeEventListener('scroll',this.throttleScroll);
    // sessionStorage.removeItem('details'+this.iDNumber+'')
  },
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #fff;
  position: relative;
}
.in_con_teb{
  padding:1rem .4rem .2rem .4rem;
  position: relative;
   z-index:49;
  .in_con_ele{
    border: .01rem #DEDEDE solid;
    height: 0.7rem;
    width: 100%;
    .in_con_text{
      width: 25%;
      height: 100%;
      align-items: center;
      justify-content: center;
      color:#666666;
      font-size:.22rem;
      font-weight: 500;
      -webkit-transition: all .5s;
      -o-transition: all .5s;
      -moz-transition: all .5s;
      transition: all .5s;
      border-right: .01rem solid #DEDEDE;
    }
    .in_con_text:nth-child(1){
      -webkit-border-top-left-radius: .1rem;
          -moz-border-radius-topleft: .1rem;  
              border-top-left-radius: .1rem;
    -webkit-border-bottom-left-radius:.1rem;
        -moz-border-radius-bottomleft:.1rem;
            border-bottom-left-radius:.1rem;
    }
    .in_con_text:nth-child(4){
      border:none;
     -webkit-border-top-right-radius:.1rem;
         -moz-border-radius-topright:.1rem;
             border-top-right-radius:.1rem;  
  -webkit-border-bottom-right-radius:.1rem;
      -moz-border-radius-bottomright:.1rem;
          border-bottom-right-radius:.1rem;
    }
  }
  .acrtive{
    background: #999999;
    color:#fff !important;
  }
  
}
.isFixed{
  position:fixed;
  background-color:#Fff;
  top:0;
  z-index:49;
  padding:1rem .4rem .2rem .4rem;
  width: 100%;
  // margin-top:.8rem ;
}
.deta_service{
  justify-content: flex-start;
  background: #f2f2f2;
  .deta_service_img{
    width: 100%;
    height: 4.7rem;
    margin-bottom:.2rem;
    border:none;
  }
  .deta_service_text{
    height: 4.44rem;
    width: 100%;
    background: #fff;
    .deta_service_header{
      font-size: .3rem;
      color:#666;
      text-align: left;
      font-weight: 600;
    }
    .deta_service_buc{
      width: 100%;
      height: 0.8rem;
      line-height: .8rem;
    }
  }
}
.deta_service_active{
//  padding-top:1.9rem;
 margin-top:1.9rem;
}
.deta_service_active2{
  margin-top:3.9rem !important;
}
.deta_service_box{
  height: 2.84rem;
  border-top:.01rem #DEDEDE solid;
  border-bottom:.01rem #DEDEDE solid;
  .deta_service_title{
    font-size: .36rem;
    color:#333;
    font-weight: 600;
    height: 1.16rem;
    line-height: 1.16rem;
  }
  .deta_service_present{
    font-size: .24rem;
    color:#999;
    text-align: left;
    line-height: .32rem;
    height: 0.62rem;
    font-family:'Microsoft YaHei';
  }
  .deta_service_number{
    height: 1.04rem;
    line-height: 1.04rem;
    color:#FF7200;
    font-size: .2rem;
  }
}
.number_money{
  font-size: .3rem;
  font-weight: 600;
  margin-right:.2rem;
}
.benefit{
  justify-content: flex-start;
  align-items: center;
  color:#FF7200;
}
.deta_service_benefit{
  width: 0.6rem;
  height: 0.35rem;
  font-size: .24rem;
  border:.01rem solid #FF7200;
  border-radius:.17rem;
  text-align: center;
  line-height: .34rem;
}
.deta_service_Explain{
  font-size: .2rem;
  margin-left:.2rem;
}
.quteb{
  margin-bottom:.98rem !important;
}
.deta_service_service{
  width: 100%;
  background: #fff;
  border-top:solid .2rem #f2f2f2;
  z-index: 51;
  .deta_service_service_text{
    width: 100%;
    height: 0.9rem;
    font-size: .3rem;
    color:#333;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    padding:.3rem;
    i{
      margin:0rem .1rem;
    }
    .deta_service_bg{
      width: 0.6rem;
      height: 0.12rem;
    }
    .bg_service_scr1{
      align-self: flex-start;
      background: url('../../../static/images/product/seivce_bg.png') center center no-repeat ;
    }
    .bg_service_scr2{
      align-self: flex-end;
      background: url('../../../static/images/product/service_bg_fr.png') center center no-repeat ;
    }
    
  } 
  .deta_service_service_IMG{
    width: 100%;
    height: 100%;
  }                                                                                                                                                  
}
.payment_mode{
  width: 100%;
  height: 0.98rem;
  background: #fff;
  justify-content:space-around;
  align-items: center;
  position: fixed;
  bottom:0;
  z-index: 51;
  .mall_ToPay{
    width: 100%;
    // position: relative;
    font-size:.3rem;
    height: 100%;
    line-height: 0.98rem;
    text-align: center;
    color:#fff; 
  }
  .Asyougo_bg{
    background: #fe7709;
  }
}
</style>
